<template>
	<div class="wrapper height100">
		<head-title :title="headText" @callback="onClickLeft"></head-title>
		<div class="banklist wrapbd">
            <cell-group>
                <cell title="支付宝" :value="bank.alipay==''?'无':bank.alipay" is-link url='#/reviseBankCard?type=zfb' />
                <cell title="微信" :value="bank.wechat==''?'无':bank.wechat" is-link url='#/reviseBankCard?type=wx' />
                <cell title="银行卡" is-link url='#/bankList' />
            </cell-group>			
		</div>
	</div>
</template>
<script>
    import HeadTitle from "./../../components/title.vue";
    import { Cell, CellGroup } from 'vant';
	export default {
		data(){
			return {
				headText: '支付方式',  //顶部标题
				bank:{
					alipay:'无',
					wechat:'无',
				},
			}
		},
		mounted(){
            this.initialize() //拉取银行卡信息
		},
		methods:{
			//返回
			onClickLeft () { this.$router.push('/user');},
			//获取支付信息
			initialize(){
				let _this = this;
				this.Tools.AXIOS({
                    url: 'user/index',
                    success: function (res) {
						_this.bank = res.data.data;
                    }
                })
			},
		},
		components: {
            HeadTitle,
            Cell,
            CellGroup,
		},
	}
</script>
<style scoped>
.banklist{ background-color: #fff; }
.banklist li{ width: 90%; overflow: hidden; padding: .5rem 0; margin: 0 auto; border-bottom: 1px solid #F4F4F4;}
.banklist li:last-child{ border-bottom:none;}
.banklist li .iscard{ width: 90%; display: flex;}
.banklist li .iscard span{ font-size: .35rem; margin-left: .5rem;}
.banklist li .iscard span label{ font-size: 1rem; color: #666; margin-left: 5px;}
.banklist li .iscard i{ width: 10%; overflow: hidden; margin-top: .1rem;}
.banklist li .iscard i img{ width: 100%;}
.banklist li .iscard p{ font-size: .35rem;}
.banklist li span:nth-of-type(2){ color: #FF3B30; margin-top: .2rem;}
</style>